import './App.css'
import {useState} from 'react';
import Tictactoe from './tictactoe';
import Demo2 from './demo2';
import Demo3 from './demo3'
import Demo4 from './demo4'
import Demo5 from "./demo5";
import Demo6 from "./demo6";
import Demo7 from "./demo7";

function App() {
    const [activeDemo, setActiveDemo] = useState(null)

    function showDemo(demo) {
        return setActiveDemo(demo)
    }

    return (
        <div className="App">
            <MyButton name="demo1" onClick={() => showDemo('demo1')}/>
            <MyButton name="demo2" onClick={() => showDemo('demo2')}/>
            <MyButton name="demo3" onClick={() => showDemo('demo3')}/>
            <MyButton name="demo4" onClick={() => showDemo('demo4')}/>
            <MyButton name="demo5" onClick={() => showDemo('demo5')}/>
            <MyButton name="demo6" onClick={() => showDemo('demo6')}/>
            <MyButton name="demo7" onClick={() => showDemo('demo7')}/>
            {activeDemo === 'demo1' && (<Tictactoe/>)}
            {activeDemo === 'demo2' && (<Demo2/>)}
            {activeDemo === 'demo3' && (<Demo3/>)}
            {activeDemo === 'demo4' && (<Demo4/>)}
            {activeDemo === 'demo5' && (<Demo5/>)}
            {activeDemo === 'demo6' && (<Demo6/>)}
            {activeDemo === 'demo7' && (<Demo7/>)}
        </div>
    );
}

function MyButton({name, onClick}) {
    return (
        <button onClick={onClick} className='my-button'>
            {name}
        </button>
    )
}

export default App;
